<template>
	<view class="com-footer-container">
		<view class="position">
			<view
				class="tabberItem"
				v-for="(item, index) in tabList"
				:key="index"
				:class="{ 'tab-ac': tabIdx == index, nHide: item.isHidden }"
				@click.stop="navToTabPage(index, item)"
				v-if="item.show"
			>
				<image :src="tabIdx == index ? item.imgAc : item.imgDefault" mode="scaleToFill"></image>
				<text>{{ item.title }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		tabIdx: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			activeIndex: 4,
			tabList: [
				{
					path: '/pages/home/home/index',
					imgDefault: '/static/images/tabbar/home.png',
					imgAc: '/static/images/tabbar/home_a.png',
					title: '首页',
					keyIndex: 0,
					show: true
				},
				{
					keyIndex: 2,
					show: true,
					path: '/pages/myInfo/index',
					imgDefault: '/static/images/tabbar/my.png',
					imgAc: '/static/images/tabbar/my_a.png',
					title: '我的'
				}
			]
		};
	},
	methods: {
		toShare() {
			this.$nav.push({
				path: '/pages/home/invitation/index'
			});
		},
		navToTabPage(idx, item) {
			uni.hideTabBar({});
			if (idx != this.tabIdx && !item.isHidden) {
				uni.switchTab({
					url: this.tabList[idx].path
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.active {
	color: $themeColor;
}
.nHide {
	visibility: hidden;
}
.com-footer-container {
	height: 98rpx;
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #fff;
	border-top: 1rpx solid #eee;
	z-index: 210;
	box-sizing: border-box;
	.position {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		align-items: center;
		position: relative;
		.tabberItem {
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 24rpx;
			color: #999;
			position: relative;

			image {
				width: 44rpx;
				height: 44rpx;
				margin-bottom: 2rpx;
			}

			&.tab-ac {
				color: $themeColor;
			}
		}
		.share-box {
			position: absolute;
			left: 50%;
			margin-left: R(-62);
			top: R(-50);
			.icon {
				width: R(124);
				height: R(124);
				border-radius: 50%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f1f7ff;
				box-sizing: border-box;
				border: R(6) solid #fff;
				image {
					width: R(110);
					height: R(110);
				}
			}
			.text {
				font-size: R(22);
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #b0b0b0;
				text-align: center;
			}
		}
	}
}

.angle-box {
	position: absolute;
	left: 80rpx;
	top: 6rpx;
}
</style>
